<script setup>
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		getYinBiaoStudyApi,
		yinbiaoDaKaApi,
		kaishidakaApi,
	} from '/api/request.js';
	let platform = uni.getStorageSync('platform');
	const props = defineProps({});
	const list = ref(null);
	onShow(async () => {
		uni.showLoading({})
		let res = await getYinBiaoStudyApi();
		console.log(res);
		uni.hideLoading()
		list.value = res.data;
	});

	const goback = () => {
		uni.navigateBack();
	};
	const showModel = (index, id, showModels) => {
		console.log(index, id, showModels);
		query.value.id = id
		query.value.showModel = showModels
		if (index == 0) {
			uni.navigateTo({
				url: '/pages/user/components/yinbiao/tingyinbianci?id=' + id
			})
		}
	}
	const getTimeClass = (status, time, item) => {
		if (status == 2) {
			return ''
		}
		const index = item.findIndex(i => i.check_times == time)
		const list = [1, 4, 8, 14, 22]
		if (list.includes(Number(item[index]?.check_days))) {
			return 'default'
		} else {
			return 'active'
		}
	}
	const checkCenter = ref(null)
	const query = ref({})
	const openCheck = async (id, index, time, check, name) => {
		checkCenter.value.open('center')
		let res = await yinbiaoDaKaApi({
			learning_id: id
		})
		query.value.title = name
		query.value.check = check
		query.value.list = res.data
		query.value.id = id
		query.value.index = index
		query.value.current_time = time
	}
	const isCheckPast = (checkTime, id, di) => {
		if ((checkTime == query.value.current_time) || new Date(checkTime) < new Date(query.value.current_time)) {
			const index = query.value.list.findIndex((item) => item.check == 1)
			return index == di
		} else {
			return false
		}
	}
	const check = async (id, status, time) => {
		if (status != 1 || !time) return
		let par = {
			learning_id: query.value.id,
			check_id: id
		}
		let res = await kaishidakaApi(par)
		if (res.code != 1) {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
			return
		}
		checkCenter.value.close()
		uni.navigateTo({
			url: `/pages/user/components/yinbiao/check?id=${query.value.id}&right=${res.data.check_id}&error=${res.data.error_word_id}&checkid=${id}&title=${query.value.title}`
		})
	}
	const showFuxi = async (id, ids) => {
		uni.navigateTo({
			url: `/pages/user/components/yinbiao/fuxi?right=${id}&error=${ids}&title=${query.value.title}`
		})
	}
</script>

<template>
	<view class="wrap" :style="{
            height: platform.gaodu + 'rpx'
        }">
		<view class="header-wrap uni-row" :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }">
			<image class="left" src="/static/img/goback-black.png" @click="goback" mode="widthFix" />
			<view class="title"> 音标学习记录1 </view>
			<image style="opacity: 0" class="left" src="/static/img/goback-black.png" mode="widthFix" />
		</view>
		<scroll-view scroll-y="true" :style="{ height: platform.gaodu - platform.dingbu - 96 + 'rpx' }">
			<view class="body">
				<uni-collapse v-if="list&&list.length" ref="collapse">
					<uni-collapse-item v-for="(item, index) in list" :key="index" :open="index==0"
						:title="item.wordpackage_name">
						<view class="lists">
							<view class="item uni-row" v-for="(da, daIndex) in item.data" :key="daIndex">
								<view class="left-index"> 第{{ da.section }}节 </view>
								<view class="time"
									:class="getTimeClass(da.clock_in_today,da.current_time,da.check_record_list)"
									@click.stop="showFuxi(da.correct_word_id,da.error_word_id)">
									{{ da.createtime }}
								</view>
								<view class="liang uni-row" :class="da.clock_in_today==1?'active':'default'"
									@click.stop="openCheck(da.id,da.section,da.current_time,da.clock_in_today,item.wordpackage_name)"
									:style="{paddingRight:da.check_record>9?'3rpx':'0rpx'}">
									{{ da.check_record>99?99:da.check_record }}
								</view>
								<view class="listss uni-row">
									<view class="status uni-row" v-for="(i, iIndex) in ['听音辩词', '打印记录']" :key="iIndex"
										@click.stop="showModel(index,da.id,da.error_word_id)" :style="{
									  width: platform.rpxs > 1.5 ? '126rpx' : '106rpx',
									  height: platform.rpxs > 1.5 ? '50rpx' : '40rpx'
									}" :class="iIndex == 0 ? 'active' : 'default'">
										{{ i }}
									</view>
								</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
				<view class="nothing" v-if="list&&list.length<1">
					<image src="/static/img/nothing.png" class="img"></image>
					<view class="label">
						哎呀，这里什么内容都没有
					</view>
				</view>
			</view>
			<view class="footer"> </view>
		</scroll-view>
	</view>
	<uni-popup ref="checkCenter">
		<view class="check-wrap">
			<view class="close-wrap">
				<image @click="checkCenter.close()" src="/static/img/user/world/close.png" class="close"></image>
			</view>
			<view scroll-y="true" class="data">
				<view class="title">
					第 {{query.index }}节
				</view>
				<scroll-view scroll-y="true" class="lists">
					<view class="item uni-row" hover-class="hover" v-for="(item,index) in query.list" :key="index">
						<view class="left-index"> 第{{ item?.check_days }}天 </view>
						<view class="time">
							{{ item.check_times }}
						</view>
						<view class="liang uni-row"
							@click="check(item.id,item.check,isCheckPast(item.check_times,item.id,index))"
							:class="isCheckPast(item.check_times,item.id,index)&&item.check==1?'active':'default'">
							{{item.check==1?'未打卡':'已打卡'}}
						</view>
					</view>

				</scroll-view>
			</view>
		</view>
	</uni-popup>
</template>

<style scoped lang="less">
	.wrap {
		background: url('/static/img/wolrd/bg.png');
		background-size: 100% 100%;

		.header-wrap {
			justify-content: space-between;
			padding-left: 24rpx;
			padding-right: 24rpx;

			.left {
				width: 48rpx;
			}

			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}
		}

		.body {
			.item {
				justify-content: space-between;
				height: 102rpx;
				background: #ffffff;
				padding: 0 28rpx;
				margin-bottom: 4rpx;

				.left-index {
					font-size: 28rpx;
					color: #333333;
				}

				.time {
					font-size: 24rpx;

					&.active {
						color: #ef4828;
					}

					&.default {
						color: #9561f3;
					}
				}

				.liang {
					justify-content: center;
					width: 42rpx;
					height: 42rpx;
					border-radius: 50%;
					padding-right: 3rpx;
					font-size: 24rpx;

					&.active {
						color: #fff;
						background: #ef4828;
					}

					&.default {
						color: #999999;
						background: #f0f0f0;
					}
				}

				.listss {
					.status {
						justify-content: center;

						border-radius: 8rpx;

						&:nth-child(2) {
							margin-left: 20rpx;
						}

						&.active {
							background: #F9EFE9;
							color: #FA6F01;
						}

						&.default {
							color: #9561f3;
							background: #f0e9f9;
						}
					}
				}
			}
		}
	}

	.btn-list {
		align-content: center;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 606rpx;
		height: 326rpx;
		padding: 0 92rpx;
		background: #FFFFFF;
		border-radius: 64rpx;

		.item {
			justify-content: center;
			width: 192rpx;
			height: 72rpx;
			border-radius: 16rpx;
			font-size: 28rpx;
			color: #FFFFFF;

			&:nth-child(1),
			&:nth-child(2) {
				margin-bottom: 46rpx;
			}

			&.active {
				background: #9561F3;
			}

			&.default {
				background: #FA6F01;
			}

			&.lanse {
				background: #6489FA;
			}
		}
	}

	.check-wrap {
		.close-wrap {
			text-align: right;
			margin-bottom: 20rpx;

			.close {
				width: 64rpx;
				height: 64rpx;
			}
		}

		.data {
			width: 672rpx;
			height: 902rpx;
			background: #FFFFFF;
			border-radius: 32rpx;
			padding: 0 24rpx;

			.title {
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}

			.lists {
				height: 810rpx;
				padding-bottom: 28rpx;

				.item {
					justify-content: space-between;
					padding: 0 28rpx;
					height: 76rpx;
					border-radius: 8rpx;

					&.hover {
						background: #F7F7F7;
					}

					.left-index {
						font-size: 22rpx;
						color: #333333;
					}

					.time {
						font-size: 20rpx;
						color: #999999;
					}

					.liang {
						justify-content: center;
						width: 106rpx;
						height: 40rpx;
						color: #fff;
						border-radius: 8rpx;
						font-size: 20rpx;

						&.active {
							background: #FF9E30;
						}

						&.default {
							background: #E6E6E6;
						}
					}
				}
			}
		}
	}
</style>